<template>
  <el-dialog
    title="题目预览"
    :visible="previewDialog"
    width="60%"
    @close="handleClose"
  >
    <el-row class="row rowBottom textPadding">
      <el-col :span="6"
        >[题型] :
        {{ $parent.farmatQuestionType(question.questionType) + "题" }}</el-col
      >
      <el-col :span="6">[编号] : {{ question.id }}</el-col>
      <el-col :span="6"
        >[难度] : {{ $parent.farmatDifficulty(question.difficulty) }}</el-col
      >
      <el-col :span="6">[标签] : {{ question.tags }}</el-col>
    </el-row>
    <el-row class="row textPadding">
      <el-col :span="6">[学科] : {{ question.subject }}</el-col>
      <el-col :span="6">[目录] : {{ question.catalog }}</el-col>
      <el-col :span="6">[方向] : {{ question.direction }}</el-col>
    </el-row>

    <el-divider class="line"></el-divider>

    <div class="question">
      <div class="title">[题干] :</div>
      <div class="content" v-html="question.question"></div>
    </div>
    <!-- 单选框 -->
    <div class="radio" v-if="question.questionType == 1">
      <div>单选题 选项 : (以下选中项为正确答案)</div>
      <el-radio-group :value="radioRights">
        <el-row
          class="radio-row"
          v-for="(item, index) in questionInfo.options"
          :key="index"
        >
          <el-radio :label="item.isRight">{{ item.title }}</el-radio>
        </el-row>
      </el-radio-group>
    </div>
    <!-- 复选框 -->
    <div class="checkbox" v-else-if="question.questionType == 2">
      <div>多选题 选项 : (以下选中项为正确答案)</div>
      <el-checkbox-group :value="checkboxRights">
        <el-row
          class="checkbox-row"
          v-for="(item, index) in questionInfo.options"
          :key="index"
        >
          <el-checkbox :label="item.isRight">{{ item.title }}</el-checkbox>
        </el-row>
      </el-checkbox-group>
    </div>
    <!-- 分割线 -->

    <el-divider class="lin2"></el-divider>

    <el-row>
      <span>参考答案 : </span>
      <el-button type="danger" @click="autoplayVideo">视频答案预览</el-button>
      <!-- 答案视频 -->
      <video
        v-if="questionInfo.videoURL && showVideo"
        ref="questionVideo"
        width="500"
        height="282"
        class="question-video"
        controls
        :src="questionInfo.videoURL"
      ></video>
    </el-row>

    <el-divider class="lin3"></el-divider>

    <el-row class="parse-row"
      >[答案解析] : <span v-html="questionInfo.answer"></span
    ></el-row>
    <el-divider class="line4"></el-divider>
    <el-row class="footer"
      >[题目备注] : <span v-html="questionInfo.remarks"></span
    ></el-row>

    <el-row type="flex" justify="center">
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'JcQuestionsPreview',
  components: {},
  props: {
    // 控制预览对话框
    previewDialog: {
      type: Boolean,
      required: true
    },
    // 问题数据
    question: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      questionInfo: {}, // 问题详情
      radioRights: 1, // 单选正确答案
      checkboxRights: [1], // 多选正确答案
      showVideo: false
    }
  },
  created () {},
  methods: {
    handleClose () {
      this.$emit('update:preview-dialog', false)
      this.showVideo = false
    },
    // 获取试题详情
    async getquestionInfo (id) {
      const { data } = await detail({ id })
      this.questionInfo = data
    },

    // 自动播放处理函数
    autoplayVideo () {
      // 如果视频按钮第一次点击,才触发对应的处理函数
      if (!this.showVideo) {
        // 如果视频为空,拦截并提示用户
        if (!this.questionInfo.videoURL) {
          return this.$message.success('视频链接为空,无法播放')
        }
        this.showVideo = true

        // 挂载视频url错误处理事件
        this.$nextTick(() => {
          const myVideo = this.$refs.questionVideo
          myVideo.onerror = () => {
            this.$message.success('视频链接无效,或视频已被删除')
            this.showVideo = false
          }
        })

        // 自动播放
        this.$nextTick(() => {
          const myVideo = this.$refs.questionVideo
          myVideo.play()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 50px 24px 24px;
}
/deep/ .rowBottom {
  margin-bottom: 20px;
}
.lcine {
  margin: 20px 0 10px 0;
}
.title {
  margin-bottom: 16px;
  padding-left: 7px;
}
.content {
  color: #5a5aff;
}
.question {
  margin-bottom: 16px;
}
/deep/.textPadding .el-col {
  padding-left: 7px;
}
.radio-row {
  margin-top: 17px;
}
.radio-row {
  margin-top: 17px;
}
.checkbox-row {
  margin-top: 17px;
}
.lin2 {
  margin: 20px 0 7px 0;
}
.lin3 {
  margin-bottom: 0;
  margin-top: 8px;
}
.question-video {
  display: block;
  margin: 40px 0 50px 0;
}
.line4 {
  margin: 0 0 10px 0;
}
.footer {
  margin-bottom: 50px;
}
/deep/ .el-row p {
  display: inline-block;
}
.parse-row {
  margin: 5px 0;
}
</style>
